<template>
  <div class="mf">
      <div class="mf-1">
    <div class="mf-head">
      <p class="p1">总实际到账金额</p>
      <p>0</p>
    </div>
    <div class="mf-head">
      <p class="p1">总提现金额</p>
      <p>0</p>
    </div>
    </div>
    <div class="mf-clear"></div>
    <div class="mf-22">
    <div class="mf-2">
      <span class="demonstration">姓名：</span>
      <el-input placeholder="姓名查询"  v-model="input" clearable size="mini" class="inp">
      </el-input>
    
    </div>
    <div class="mf-2">
      <span class="demonstration">申请日期：</span>
     
      <el-date-picker
        v-model="value1"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        size="mini"
        class="inp"
      >
      </el-date-picker>
      
    </div>
</div>
    <div class="mmm">
      <el-row>
        <el-button size="mini">全部(0)</el-button>
        <el-button size="mini">提现申请(0)</el-button>
        <el-button size="mini">提现中(0)</el-button>
        <el-button size="mini">提现成功(0)</el-button>
        <el-button size="mini">提现失败(0)</el-button>
      </el-row>
    </div>
    <div class="mmm">
      <span>发款方式：</span>
      <el-radio-group v-model="radio1">
        <el-radio :label="3">全部</el-radio>
        <el-radio :label="6">个人</el-radio>
        <el-radio :label="9">公司</el-radio>
      </el-radio-group>
    </div>
    <div  class="mmm">
      <span>提现方式：</span>
      <el-radio-group v-model="radio2">
        <el-radio :label="3">全部</el-radio>
        <el-radio :label="6">普通提现</el-radio>
        <el-radio :label="9">管理津贴提现</el-radio>
      </el-radio-group>
    </div>

    <div class="mmm">
      <el-row>
        <el-button size="mini">导出数据到Excel</el-button>
        <el-button size="mini" type="primary" icon="el-icon-search">查询</el-button>
        <el-button size="mini" type="primary" icon="el-icon-delete">重置</el-button>
      </el-row>
    </div>

<div>
<el-table
    :data="tableData"
    height="250"
    border
    style="width: 100%">
    <el-table-column
      prop="date"
      label="ID"
      width="70">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="80">
    </el-table-column>
    <el-table-column
      prop="address"
      label="身份证"
      width="120">
    </el-table-column>
    <el-table-column
      prop="name"
      label="手机号"
      width="100">
    </el-table-column>
<el-table-column
      prop="name"
      label="提现金额"
      width="80">
    </el-table-column>
    <el-table-column
      prop="name"
      label="实际到账"
      width="80">
    </el-table-column>
    <el-table-column
      prop="name"
      label="银行卡"
      width="100">
    </el-table-column>
    <el-table-column
      prop="name"
      label="申请提现时间"
      width="150">
    </el-table-column>
<el-table-column
      prop="name"
      label="状态"
      width="80">
    </el-table-column>
<el-table-column
      prop="name"
      label="失败原因"
      >
    </el-table-column>

  </el-table>

</div>



  </div>
</template>









<script>
import vue from "vue";
import {
  Table,
  Radio,
  DatePicker,
  Select,
  TableColumn,
  Pagination,
  Option,
  Button,
  Row,
  Input
} from "element-ui";
vue.use(Table);
vue.use(Radio);
vue.use(DatePicker);
vue.use(Select);
vue.use(TableColumn);
vue.use(Pagination);
vue.use(Option)
vue.use(Button)
vue.use(Row)
vue.use(Input)
export default {
  data() {
    return {
      tableData: [],
      value1: "",
      radio1: "",
      radio2: "",

      input: "",
    };
  },
};
</script>


<style scoped>
.inp{
  width: 300px;
  text-align: right;
}
.mf {
  height: 100%;
  width: 100%;
  overflow: hidden;
  line-height:0;
}
.mf-1{
  
height: 50px;
width: 100%;
}
.mf-head {
  float: left;
  height: 50px;
  width: 50%;
}
.mf-clear {
  clear: both;
}
.mf-2 {
  float: left;
  height: 50px;
  width: 50%;
}
.mf-22{
    height: 50px;
    width:100%;
}
.xm{
    height: 50px;
    width: 300px;
}
.mmm{
  height: 40px;
}
</style>